<template>
	<view class="mainpadding">
		<view class="flexbetween">
			<view class="titletext hei_text bold" v-if="orderInfo.status==6">待接單</view>
			<view class="titletext hei_text bold" v-if="orderInfo.status==7">待取貨</view>
			<view class="titletext hei_text bold" v-if="orderInfo.status==8">配送中</view>
			<view class="titletext hei_text bold" v-if="orderInfo.status==9">已完成</view>
			<text class="hong_text titletext bold">#{{orderInfo.call_no}}</text>
		</view>
		<view class="mainpadding_top ffffff radius">
			<view class="flexleft ">
				<image class="imgBox margin_right2" src="@/static/image/system/deliver.png" mode=""></image>
				<view class="text_a color_zero">{{returnKmUnit(Number(orderInfo.distance))}}</view>
			</view>
			<view class="flexbetween margin_top">
				<view style="width: 500rpx;">
					<view class="text_ft color_three">{{orderInfo.username}}</view>
					<view class="text_d color_nine margin_top2">
						{{orderInfo.useraddre}}
					</view>
				</view>
				<image class="navigationBox" src="@/static/image/system/navigation.png" mode="" @click="daohang(orderInfo.useraddre)"></image>
			</view>
		</view>
		<view class="mainpadding_top ffffff radius">
			<view class="flexbetween">
				<view class="text_ft color_three">訂單商品</view>
				<view class="text_ft color_red">${{orderInfo.paymoney}}</view>
			</view>
			<view class="flexbetween margin_top" v-for="item in orderInfo.goods_data" :key="item.id">
				<view class="xiaohui">{{item.goods_name}}</view>
				<view class="huang_text main_size bold">*{{item.num}}</view>
			</view>
			<view class="margin_top flexright huang_text  main_size bold">
				<text class="hui_text">合計：</text>
				<text>{{orderInfo.total_num}}件</text>
			</view>
		</view>
		<view class="mainpadding_top ffffff radius" v-if="orderInfo.ordernotes">
			<view class="text_ft color_three">訂單備註</view>
			<view class="xiaohui margin_top">{{orderInfo.ordernotes}}</view>
		</view>
		<view class="" style="padding-bottom: 150rpx;">
			<view class="mainpadding_top ffffff radius">
				<view class="flexbetween">
					<view class="hei_text main_size bold">訂單編號</view>
					<view class="xiaohui ">{{orderInfo.order_sn}}</view>
				</view>
				<!-- <view class="flexbetween margin_top">
					<view class="hei_text main_size bold">收益</view>
					<view class="xiaohuang">$232.33</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="hei_text main_size bold">期望送达時間</view>
					<view class="xiaohui ">2023-23-32 32：23</view>
				</view> -->
				<view class="flexbetween margin_top">
					<view class="hei_text main_size bold">接單時間</view>
					<view class="xiaohui ">{{http.timereturn(orderInfo.jdtime * 1000)}}</view>
				</view>
				<view class="flexbetween margin_top" v-if="orderInfo.pzqh_image_text">
					<view class="hei_text main_size bold">騎手取貨上傳</view>
					<view class="xiaohui ">{{http.timereturn(orderInfo.qhtime * 1000)}}</view>
				</view>
				<view class="flexleft" v-if="orderInfo.pzqh_image_text">
					<view class="itemimgBox flexcenter margin_top" v-for="(item,index) in orderInfo.pzqh_image_text" :key="index">
						<image class="listleftimg radius" :src="item" mode="" @click="lbtpriview(index,orderInfo.pzqh_image_text)"></image>
					</view>
				</view>
				<view class="flexbetween margin_top" v-if="orderInfo.pzsd_image_text">
					<view class="hei_text main_size bold">騎手送達上傳</view>
					<view class="xiaohui ">{{http.timereturn(orderInfo.endtime * 1000)}}</view>
				</view>
				<view class="flexleft" v-if="orderInfo.pzsd_image_text">
					<view class="itemimgBox flexcenter margin_top"  v-for="(item,index) in orderInfo.pzsd_image_text" :key="index">
						<image class="listleftimg radius" :src="item" mode="" @click="lbtpriview(index,orderInfo.pzsd_image_text)"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="mainpadding posibottom flexbetween ffffff" style="bottom: 0;" v-if="orderInfo.status==7 || orderInfo.status==8 || orderInfo.status==6">
			<view class="flexleft" v-if="orderInfo.status==7 || orderInfo.status==8">
				<view class="flexcolumn margin_right5"  @click.stop="phone(orderInfo.shop.shopmbl)">
					<u-icon name="phone" color="#333" size="24" > </u-icon>
					<view class="xiaohui margin_top">商家</view>
				</view>
				<view class="flexcolumn margin_right5" @click="phone(orderInfo.mobile)">
					<u-icon name="phone" color="#333" size="24"></u-icon>
					<view class="xiaohui margin_top">客戶</view>
				</view>
			</view>
			<view class="yellowBtn flex1" v-if="orderInfo.status==6" @click="qiangdan(id)">立即接單</view>
			<view class="yellowBtn flex1" v-if="orderInfo.status==7" @click="show=true;upflag=1;">拍照取貨</view>
			<view class="yellowBtn flex1" v-if="orderInfo.status==8" @click="show=true;upflag=2;">拍照送達</view>
		</view>
		<u-modal :show="show" title="拍照上傳" confirmColor="#ffb800" confirmText="確認" @confirm="upconfirm"cancelText="取消"
			@cancel="show=false" showCancelButton>
			<view class="slot-content" style="width: 730rpx;">
				<view class="flexleft flex_wrap">
					<view class="itemimgBox flexcenter margin_top2" v-for="(item,index) in images_text" :key="index">
						<!-- 已上传 -->
						<view class="listleftimg1 radius">
							<image class="radius" :src="item" mode=""></image>
							<view class="deleteimg" @click="delindex(index,images,images_text)"></view>
						</view>
					</view>
					<view class="itemimgBox flexcenter margin_top2" @click="uploadImg(4,images,images_text)"
						v-if="images.length<4"><!-- 未上传 -->
						<image class="listleftimg1 radius" src="@/static/image/system/upimg.png" mode=""></image>
					</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "",
				lat: "",
				lng: "",
				orderInfo: {},
				show: false,
				images: [],
				images_text: [],
				upflag:0,//1拍照取货，2拍照送达
			}
		},
		onLoad(options) {
			this.id = options.id
			this.lat = options.lat
			this.lng = options.lng
			this.getInfo()
		},
		methods: {
			qiangdan(id) {
				this.http.modal('搶單', '是否確認搶單', true, (res) => {
					if (res) {
						this.http.request('/api/ordergoods/ordergoodsqd', 'POST', {
							id: id,
							shopstaff_id: uni.getStorageSync("shopstaff_id"),
						}).then(res => {
							this.http.toast(res.msg)
							if(res.code==1){
								this.getInfo()
							}
						})
					}
				})
			},
			upconfirm(){
				if(this.images.length==0){
					this.http.toast("請上傳圖片！")
					return false
				}
				this.show= false
				let url = "/api/Ordergoods/ordergoodspz"
				let data = {
					id:this.id,
					pzqh_image:this.images.join()
				}
				if(this.upflag==2){
					url = "/api/Ordergoods/ordergoodssd"
					data = {
						id:this.id,
						pzsd_image:this.images.join()
					}
				}
				this.http.request(url, 'POST', data).then(res=>{
					this.http.toast(res.msg)
					if(res.code==1){
						this.images = []
						this.images_text = []
						if(this.upflag==2){
							setTimeout(()=>{
								uni.navigateBack(1)
							},500)
							return false
						}
						this.getInfo()
					}
				})
			},
			uploadImg(value, upImgs, upImgs_text) { //上传图片
				let _this = this;
				let num = Number(value) - upImgs.length;
				if (num <= 0) {
					return false;
				}
				this.http.chooseImage(num, ['camera']).then(res => {
					for (var i = 0; i < res.length; i++) {
						_this.uploadImageService(res[i], upImgs, upImgs_text)
					}
				}).catch(err => {});
			},
			openmap(){
				uni.openLocation({
				     latitude: Number(this.orderInfo.latitude),//即将传到高德或腾讯地图的终点纬度  必須是数值，字符串无效
				     longitude:Number(this.orderInfo.longitude),//即将传到高德或腾讯地图的终点经度  必須是数值，字符串无效
				     name: this.orderInfo.useraddre,//即将传到高德或腾讯地图的店鋪名称
				     address: this.orderInfo.useraddre,//即将传到高德或腾讯地图的详細地址
				     scale: 18
				})
			},
			delindex(index, upImg, upImgs_text) {
				upImg.splice(index, 1)
				upImgs_text.splice(index, 1)
			},
			uploadImageService(url, upImg, upImgs_text) {
				let _this = this;
				this.http.uploadFile('/api/common/upload', url).then(res => {
					let image_item = res.fullurl;
					upImg.push(res.url)
					upImgs_text.push(image_item);
				}).catch(err => {});
			},
			async getInfo() { //订單详情
				let res = await this.http.request('/api/Ordergoods/deailOrdergoods', 'POST', {
					id: this.id,
					lng:this.lng,
					lat:this.lat
				})
				if (res.code == 1) {
					let goods_allprice = 0
					res.data.goods_data.forEach(value => {
						value.logoimage = this.imgUrl + value.logoimage
						goods_allprice = Number(value.price) + Number(goods_allprice)
					})
					if(res.data.pzqh_image){
						let pzqh_image_text1 = res.data.pzqh_image.split(",")
						let pzqh_image_text = []
						if (pzqh_image_text1.length) {
							pzqh_image_text1.forEach(item => {
								let text = this.imgUrlUser + item
								pzqh_image_text.push(text)
							})
							this.$set(res.data, "pzqh_image_text", pzqh_image_text)
							console.log(res.data);
						}
					}
					
					if(res.data.pzsd_image){
						let pzsd_image_text1 = res.data.pzsd_image.split(",")
						let pzsd_image_text = []
						if (pzsd_image_text1.length) {
							pzsd_image_text1.forEach(item => {
								let text = this.imgUrlUser + item
								pzsd_image_text.push(text)
							})
							this.$set(res.data, "pzsd_image_text", pzsd_image_text)
						}
					}
					this.$set(res.data, "goods_allprice", goods_allprice)
					this.orderInfo = res.data
					this.pageShow = true
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.listleftimg1{
		width: 120rpx;
		height: 120rpx;
		position: relative;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.flex1 {
		flex: 1;
	}

	.margin_right5 {
		margin-right: 50rpx;
	}

	.yellowBtn {
		padding: 30rpx;
		text-align: center;
		border-radius: 16rpx;
		background-color: rgba(255, 184, 0, 1);
		font-size: 26rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.topimg {
		width: 40rpx;
		height: 40rpx;
	}

	.imgBox {
		width: 40rpx;
		min-width: 40rpx;
		height: 40rpx;
	}

	.fromImg {
		width: 9rpx;
		height: 30rpx;
		margin-left: 15rpx;
	}

	.navigationBox {
		width: 58rpx;
		min-width: 58rpx;
		height: 58rpx;
	}
</style>